<template>
  <div class="box-main">
    <div class="header">
      <img class="header-close" src="@/assets/images/UpgradeDetails/icon2.png" alt="" />
      <p class="header-name">强化成功</p>
    </div>
    <div class="content">
      <img src="@/assets/images/ObtainTwo/icon2.png" alt="" />
      <div class="content-text">
        <p>净化法印</p>
        <p class="content-text-tag">MAX</p>
        <div class="content-text-flex">
          <p class="content-text-flex-font-FFA647">+10</p>
          <img src="@/assets/images/ObtainTwo/icon3.png" alt="" />
          <p class="content-text-flex-font-FD6B3A">+11</p>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list-item" v-for="v in list" :key="v">
        <p>{{ v.text }}</p>
        <div class="flex-center">
          <p class="list-item-black">{{ v.value }}</p>
          <img class="list-item-img" src="@/assets/images/ObtainTwo/icon3.png" alt="" />
          <p class="list-item-green">{{ v.rate }}</p>
        </div>
      </div>
    </div>
    <div class="btn">我知道了</div>
  </div>
</template>
<script setup>

const list = [
  { text: '戴帽子进入34次', value: 30, rate: 34 },
  { text: '自己或对方魅力值增加2.5%', value: '2%', rate: '2.5%' },
  { text: '自己或对方魅力值增加260 ', value: 20, rate: 26 },
  { text: '自己或对方魅力值增加2.5%', value: '2%', rate: '2.5%' },
  { text: '戴帽子进入34次', value: 30, rate: 34 },
]
</script>
<style lang="scss" scoped>
.box-main {
  padding: 7.69rem 3.08rem;
  background-image: url('@/assets/images/ObtainTwo/icon1.png');
  background-size: 100% 53.59rem;
  background-repeat: no-repeat;

  .list {
    margin-top: 6.15rem;

    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2.05rem 5.13rem;
      background: #FFFFFF;
      border-radius: 2.56rem 2.56rem 2.56rem 2.56rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 3.08rem;
      color: #666666;
      line-height: 4.36rem;
      margin-bottom: 2.82rem;

      &:last-child {
        margin-bottom: 0;
      }

      &-black {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 3.08rem;
        color: #333333;
        line-height: 4.36rem;
      }

      &-img {
        width: 4.1rem;
        height: 4.1rem;
        display: block;
        margin: 0 2.56rem;
      }

      &-green {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 3.08rem;
        color: #70B33C;
        line-height: 4.36rem;
      }
    }
  }

  .btn {
    background: linear-gradient(270deg, #FD6B3A 0%, #FFA84A 100%);
    border-radius: 8.46rem 8.46rem 8.46rem 8.46rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 4.1rem;
    color: #FFFFFF;
    line-height: 5.64rem;
    padding: 3.08rem 0;
    text-align: center;
    margin-top: 7.69rem;
  }

  .content {
    margin-top: 6.92rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    img {
      width: 24.1rem;
      height: 24.1rem;
      border-radius: 35.9rem 35.9rem 35.9rem 35.9rem;
      display: block;
    }

    &-text {
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 4.62rem;
      color: #333333;
      line-height: 6.41rem;
      margin-top: 2.56rem;

      &-tag {
        padding: 0.77rem 1.54rem;
        background: linear-gradient(180deg, #FDB840 0%, #D0810B 100%);
        border-radius: 3.59rem 3.59rem 3.59rem 3.59rem;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 2.56rem;
        color: #FFFFFF;
        line-height: 2.56rem;
        margin: 0 1.54rem;
      }

      &-flex {
        display: flex;
        align-items: center;

        img {
          width: 4.1rem;
          height: 4.36rem;
          margin: 1.03rem;
          display: block;
        }

        &-font-FFA647 {
          font-family: Roboto, Roboto;
          font-weight: 500;
          font-size: 4.62rem;
          line-height: 5.38rem;
          background: linear-gradient(180deg, #FFA647 0%, #FFCD43 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        &-font-FD6B3A {
          font-family: Roboto, Roboto;
          font-weight: 500;
          font-size: 4.62rem;
          line-height: 5.38rem;
          background: linear-gradient(0deg, #FD6B3A 0%, #FFA84A 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      }
    }


  }

  .header {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 2.05rem;

    &-close {
      width: 4.1rem;
      height: 4.1rem;
      display: block;
    }

    &-name {
      font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
      font-weight: 700;
      font-size: 6.15rem;
      background: linear-gradient(180deg, #E4614E 0%, #EA872A 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      line-height: 7.44rem;
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
  }
}
</style>